<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/jquery.js"></script>
  </head>
  <body>
    <div class="box">11111</div>
    <button>点击我获取属性</button>
    <button>点击我删除属性</button>
    <script>
      // getAttribute()
      // jq操作属性 2种方式 1.prop 2.attr
      // 一、prop设置或者获取属性
      // 1.设置属性 ：固有属性会显示 ，非固有属性不会显示；
      // $(".box").click(function(){
      //     // $(this).prop("myattr","val"); //非固有属性 设置上了但是不显示；
      //     $(this).prop("id","myid"); // 固有属性
      // })
      // // 属性获取 是不管固有属性还是非固有都可以获取；
      // $("button:eq(0)").click(function(){
      //     console.log($(".box").prop("myattr"));
      // })

      // // 删除属性；（只能删除非固有属性）
      // $("button:eq(1)").click(function(){
      //     $(".box").removeProp("id");
      // })

      // 二、attr来设置或者获取属性；
      // 1.设置属性
      $(".box").click(function () {
        $(".box").attr("myattr", "val");
        // $(".box").attr("id","myid");
      });

      // 2.获取属性
      $("button")
        .eq(0)
        .click(function () {
          console.log($(".box").attr("id"));
        });

      // 3.移除属性
      $("button")
        .eq(1)
        .click(function () {
          $(".box").removeAttr("myattr");
        });
    </script>
  </body>
</html>
